<template>
  <div class="person">
    姓名：{{ person.name }} <br />
    年龄：{{ person.age }} <br />
    车辆：{{ person.car.c1 }}-{{ person.car.c2 }} <br />
    <button @click="changeAge">更改年龄</button>
    <button @click="changeCar1">更改车辆1</button>
    <button @click="changeCar2">更改车辆2</button>
    <button @click="changeCar">更改车辆</button>
  </div>
</template>

<script lang="ts">
export default {
  name: 'Person',
}
</script>

<script lang="ts" setup>
import { reactive, watch } from 'vue'

let person = reactive({ name: '李四', age: 48, car: { c1: '奔驰', c2: '宝马' } })

function changeAge() {
  person.age += 1
}
function changeCar1() {
  person.car.c1 = '保时捷'
}
function changeCar2() {
  person.car.c2 = '宾利'
}
function changeCar() {
  person.car = { c1: '奔驰1', c2: '宝马2' }
}
// 监测 响应式对象 的 基本类型 的属性值 变化
watch(
  () => {
    return person.age
  },
  (newVlaue, oldVal) => {
    console.log(newVlaue, oldVal)
  },
)
// 监测 响应式对象 的 对象类型 的属性值 变化
watch(
  () => {
    return person.car
  },
  (newVlaue, oldVal) => {
    console.log(newVlaue, oldVal)
  },
  { deep: true },
)
</script>

<style scoped>
.person {
  background-color: skyblue;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 10px;
}
button {
  margin: 0 5px;
}
</style>
